<template>
	<view>
		<view class="box_1" style="padding-top: 30rpx;">
			<u-search v-model="key" @search="onSearch" shape="round" placeholder="请输入关键字" @custom="onSearch" />
		</view>
		<view class="search_tip" v-if="searchTip">
			<view class="tx1">通过以下方式搜索公司</view>
			<view class="tx2">公司全称：如“百度（中国）有限公司”</view>
			<view class="tx2">公司简称：如“百度”</view>
			<view class="tx2">屏蔽企业后，该企业将无法查看您的简历</view>
		</view>
		<view class="search_empty" v-if="num <= 0 && !searchTip">
			没有搜到您搜索的公司
		</view>
		<view class="box_2" v-if="num > 0">
			<view class="result_title">
				与“{{ aboutText }}”有关的公司，共{{ num }}个
			</view>
			<view class="list_wrapper">
				<view :class="parseInt(item.in_blacklist) > 0 ? 'list shield' : 'list'"
					v-for="(item, index) in blackList" :key="index" @click="handleCheck(item)">
					<view :class="item.checked ? 'self_checkbox active_checkox' : 'self_checkbox'"
						v-if="parseInt(item.in_blacklist) === 0">
						<u-icon v-if="item.checked" name="checkbox-mark" size="20rpx" color="#fff"></u-icon>
					</view>
					<view class="tx1">{{ item.companyname }}</view>
					<view class="tx2">
						{{ item.scale_text }} · {{ item.trade_text }} ·
						{{ item.nature_text }}
					</view>
					<view class="tx3" v-if="parseInt(item.in_blacklist) > 0">
						已屏蔽
					</view>
				</view>
			</view>
		</view>
		<view class="box_3">
			<!-- #ifdef MP-TOUTIAO || MP-WEIXIN -->
			<u-button class="btn_left" plain shape="circle" type="primary" throttle-time="500" @click="handleAllSelect">
				{{ allSelectedText }}
			</u-button>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<button class="btn_left" plain shape="circle" type="primary" throttle-time="500" @click="handleAllSelect">
				{{ allSelectedText }}
			</button>
			<!-- #endif -->
			<!-- #ifdef MP-TOUTIAO || MP-WEIXIN -->
			<u-button class="btn_right" shape="circle" type="primary" @click="handleShield">
				屏蔽所选企业 ({{ selected.length }})
			</u-button>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<button class="btn_right" shape="circle" type="primary" @click="handleShield">
				屏蔽所选企业 ({{ selected.length }})
			</button>
			<!-- #endif -->
			<view class="clear"></view>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import http from '@/utils/http'
	import api from '@/api'
	export default {
		name: 'PrivacyAddBlackList',
		data() {
			return {
				searchTip: true,
				key: '',
				num: 0,
				selectedNum: 0,
				aboutText: '',
				blackList: [],
				selected: [],
				effectiveList: [],
				allSelected: false,
				allSelectedText: '全选'
			}
		},
		created() {},
		methods: {
			handleCheck(data, event) {
				this.allSelected = []
				let {
					id,
					in_blacklist
				} = data
				if (in_blacklist == 1) {
					return false
				}
				this.blackList.forEach((item, index) => {
					if (id == item.id) {
						this.$set(item, 'checked', !item.checked)
						this.$forceUpdate()
						if (item.checked) {
							this.selected.push(item.id)
							let arr = [...new Set(this.selected)]
							this.selected = arr
						} else {
							let arr = this.selected.filter(item2 => {
								return parseInt(item2) !== parseInt(id)
							})
							this.selected = arr
						}
					}
				})
				let _this = this
				setTimeout(function() {
					_this.syncAllSelected()
				}, 100)
			},
			// 搜索
			onSearch() {
				if (!this.key.length) {
					this.$refs.uTips.show({
						title: '请输入关键字',
						type: 'error'
					})
					return false
				}
				this.searchTip = false
				this.aboutText = this.key
				http
					.get(api.resume_privates_searchCompany, {
						keyword: this.aboutText
					})
					.then(res => {
						if (parseInt(res.data.code) === 200) {
							this.num = res.data.data.items.length
							if (this.num) {
								res.data.data.items.forEach((item) => {
									this.$set(item, 'checked', false)
									this.blackList.push(item)
								})
								this.effectiveList = res.data.data.items.filter(item => {
									return parseInt(item.in_blacklist) === 0
								})
							}
						} else {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'error'
							})
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			// 选中
			handleSelected() {
				this.syncAllSelected()
			},
			// 判断是否全部选中
			syncAllSelected() {
				this.allSelected = this.selected.length === this.effectiveList.length
				this.allSelected ?
					(this.allSelectedText = '取消全选') :
					(this.allSelectedText = '全选')
			},
			// 屏蔽所选公司
			handleShield() {
				if (!this.selected.length) {
					this.$refs.uTips.show({
						title: '请选择要屏蔽的企业',
						type: 'error'
					})
					return false
				}
				http
					.post(api.resume_privates_add_blacklist, {
						id: this.selected
					})
					.then(res => {
						if (parseInt(res.data.code) === 200) {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'success'
							})
							setTimeout(() => {
								uni.navigateBack({
									delta:1
								})
							}, 1800)
						} else {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'error'
							})
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			// 全选、取消全选
			handleAllSelect() {
				if (this.allSelected) {
					// 取消全选
					this.selected.splice(0, this.selected.length)
					this.blackList.forEach(item => {
						this.$set(item, "checked", false)
					})
				} else {
					// 全选
					this.selected = this.effectiveList.map(function(item) {
						return item.id
					})
					this.blackList.forEach(item => {
						this.$set(item, "checked", true)
					})
				}
				this.syncAllSelected()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box_1 {
		padding: 30rpx 30rpx 0;
	}

	.box_3 {
		width: 100%;
		padding: 36rpx 38rpx 36rpx 52rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		border-top: 2rpx solid #f3f3f3;
		background: #fff;

		.btn_left {
			float: left;
			/* #ifdef MP-ALIPAY */
			border-radius: 40rpx;
			font-size: 30rpx;
			padding: 0 40rpx;
			height: 82rpx;
			line-height: 78rpx;
			color: #2979ff;
			border-color: #a0cfff;
			background-color: #ecf5ff;
			/* #endif */
		}

		.btn_right {
			float: right;
			/* #ifdef MP-ALIPAY */
			border-radius: 40rpx;
			font-size: 32rpx;
			padding: 0 40rpx;
			color: #ffffff;
			border-color: #2979ff;
			background-color: #2979ff;
			font-size: 30rpx;
			height: 82rpx;
			line-height: 78rpx;
			/* #endif */
		}
	}

	::v-deep .u-icon {
		top: -4rpx !important;
		left: 4rpx !important;
	}

	.box_2 {
		.list_wrapper {
			width: 100%;
			padding: 0 38rpx 0 52rpx;

			.list {
				&.shield {
					.tx3 {
						display: block;
					}

					.tx1,
					.tx2 {
						color: #999999;
					}

					.self_checkbox {
						display: none;
					}
				}

				.tx3 {
					position: absolute;
					right: 0;
					top: 50%;
					transform: translate(0, -50%);
					font-size: 24rpx;
					color: #999999;
					display: none;
				}

				.self_checkbox {
					width: 32rpx;
					height: 32rpx;
					border-radius: 50%;
					border: 2rpx solid #ccc;
					position: absolute;
					left: 0;
					top: 50%;
					transform: translate(0, -50%);
					display: flex;
					align-items: center;
					justify-content: center;

					&.active_checkox {
						background: #1787FB;
					}
				}

				.tx2 {
					font-size: 24rpx;
					color: #666666;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					padding: 0 60rpx 30rpx 56rpx;
				}

				.tx1 {
					font-size: 30rpx;
					color: #333333;
					font-weight: bold;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					padding: 40rpx 60rpx 30rpx 56rpx;
				}

				position: relative;

				&:not(:last-child) {
					border-bottom: 2rpx solid #f3f3f3;
				}
			}
		}

		.result_title {
			font-size: 24rpx;
			color: #999999;
			padding: 20rpx 48rpx 0 48rpx;
		}

		width: 100%;
		background-color: #ffffff;
		margin-bottom: 180rpx;
	}

	.search_empty {
		width: 100%;
		padding-top: 486rpx;
		text-align: center;
		font-size: 30rpx;
		color: #999999;
		background: url($ImgUrl + "search_empty_bg.png") center 250rpx no-repeat;
		background-size: 284rpx 200rpx;
	}

	.search_tip {
		.tx2 {
			font-size: 30rpx;
			color: #666666;

			&:not(:last-child) {
				padding-bottom: 15rpx;
			}
		}

		.tx1 {
			font-size: 36rpx;
			color: #333333;
			font-weight: bold;
			padding: 45rpx 0 41rpx;
		}

		padding: 0 50rpx;
		background-color: #ffffff;
		width: 100%;
	}
</style>
